OCPBUGS-81668: Fix User Preferences responsive breakpoints bug by sg00dwin · Pull Request #16279 · openshift/console

sg00dwin · 2026-04-14T16:17:10Z

Summary

Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
Sidebar, SidebarPanel, and SidebarContent components
Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains
Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

Bug Screenshot

This bug will be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

Unit tests pass (26/26 across 7 suites)
ESLint clean
Manually verified responsive behavior at all breakpoints

Assisted by Claude code

Summary by CodeRabbit

Refactor
- Restructured the user preferences page layout, transitioning from a custom container structure to a sidebar-based design.
- Updated the presentation and organization of preference form components within the user interface.
Style
- Removed custom CSS styling rules from user preference forms.
- Removed custom CSS styling rules from the user preferences page structure.

openshift-ci-robot · 2026-04-14T16:17:20Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-81668, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.22.0) matches configured target version for branch (4.22.0)
bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Summary

Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
Sidebar, SidebarPanel, and SidebarContent components

Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains

Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

This bug will be more be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

Unit tests pass (26/26 across 7 suites)

ESLint clean

Manually verified responsive behavior at all breakpoints

Assisted by Claude code

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

openshift-ci-robot · 2026-04-14T16:17:46Z

@sg00dwin: This pull request references Jira Issue OCPBUGS-81668, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target version (4.22.0) matches configured target version for branch (4.22.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

Summary

Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
Sidebar, SidebarPanel, and SidebarContent components

Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains

Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

This bug will be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

Unit tests pass (26/26 across 7 suites)

ESLint clean

Manually verified responsive behavior at all breakpoints

Assisted by Claude code

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

coderabbitai · 2026-04-14T16:21:59Z

📝 Walkthrough

Walkthrough

This pull request refactors the user preferences UI by replacing custom CSS styling with PatternFly components. The changes remove 48 lines of SCSS across two stylesheet files (UserPreferenceForm.scss and UserPreferencePage.scss). The UserPreferencePage.tsx component is updated to use PatternFly's Sidebar, SidebarPanel, and SidebarContent components instead of custom div-based layout containers. The UserPreferenceForm.tsx component has its stylesheet import removed along with its associated className. The overall JSX logic and form submission behavior remain unchanged.

🚥 Pre-merge checks | ✅ 10

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: replacing custom CSS with PatternFly Sidebar components to fix responsive breakpoint issues in the User Preferences page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Stable And Deterministic Test Names	✅ Passed	Frontend-only refactoring of React/TypeScript components and SCSS stylesheets with no Ginkgo tests modified; custom check validates Ginkgo test stability which is not applicable.
Test Structure And Quality	✅ Passed	PR modifies only frontend React/TypeScript components and SCSS in console-app; no Go test files or Ginkgo tests are present.
Microshift Test Compatibility	✅ Passed	This PR contains only frontend changes (TypeScript/React components and SCSS) with no Go-based Ginkgo e2e tests. The check applies only to Ginkgo e2e tests, which are absent here.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR contains only frontend refactoring of React TypeScript components without introducing any new Ginkgo e2e tests or other tests, making this check not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only frontend UI components and stylesheets; contains no deployment manifests, operator code, controllers, or scheduling constraints.
Ote Binary Stdout Contract	✅ Passed	OTE Binary Stdout Contract check is not applicable to this PR; only React/TypeScript frontend components and SCSS stylesheets were modified, with no Go code or test infrastructure changes.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PR contains only frontend UI component changes to User Preferences; no new Ginkgo e2e tests are introduced.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

logonoff

Should we be setting a max-width on this? The user preferences page looks very wide now

before:

after:

sg00dwin · 2026-04-14T18:35:50Z

Should we be setting a max-width on this? The user preferences page looks very wide now

Agreed. Added width sizing to TabContent

Also, apply an override z-index to handle upstream PatternFly bug Assisted by Claude code

logonoff

/lgtm

openshift-ci · 2026-04-21T18:16:38Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, sg00dwin

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

logonoff · 2026-04-21T18:17:53Z

Tested Safari Chrome and Firefox on mobile and desktop viewports and it works great

logonoff · 2026-04-21T18:18:01Z

/verified by @logonoff

openshift-ci-robot · 2026-04-21T18:18:15Z

@logonoff: This PR has been marked as verified by @logonoff.

Details

In response to this:

/verified by @logonoff

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

openshift-merge-bot · 2026-04-21T20:31:56Z

/retest-required

Remaining retests: 0 against base HEAD 9f9e9be and 2 for PR HEAD 13ecac9 in total

openshift-ci · 2026-04-22T06:13:00Z

@sg00dwin: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

openshift-ci-robot · 2026-04-22T06:15:53Z

@sg00dwin: Jira Issue Verification Checks: Jira Issue OCPBUGS-81668
✔️ This pull request was pre-merge verified.
✔️ All associated pull requests have merged.
✔️ All associated, merged pull requests were pre-merge verified.

Jira Issue OCPBUGS-81668 has been moved to the MODIFIED state and will move to the VERIFIED state when the change is available in an accepted nightly payload. 🕓

Details

In response to this:

Summary

Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
Sidebar, SidebarPanel, and SidebarContent components

Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains

Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

Bug Screenshot

This bug will be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

Unit tests pass (26/26 across 7 suites)

ESLint clean

Manually verified responsive behavior at all breakpoints

Assisted by Claude code

Summary by CodeRabbit

Refactor

Restructured the user preferences page layout, transitioning from a custom container structure to a sidebar-based design.

Updated the presentation and organization of preference form components within the user interface.

Style

Removed custom CSS styling rules from user preference forms.

Removed custom CSS styling rules from the user preferences page structure.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

sg00dwin assigned logonoff Apr 14, 2026

openshift-ci Bot requested review from rhamilto and stefanonardo April 14, 2026 16:24

openshift-ci Bot added the component/core Related to console core functionality label Apr 14, 2026

logonoff reviewed Apr 14, 2026

View reviewed changes

sg00dwin force-pushed the OCPBUGS-81668-User-Preference-Responsive-Bug branch from 91a978e to a09975c Compare April 14, 2026 18:34

Replace custom CSS with PatternFly Sidebar on User Preferences page

13ecac9

Also, apply an override z-index to handle upstream PatternFly bug Assisted by Claude code

sg00dwin force-pushed the OCPBUGS-81668-User-Preference-Responsive-Bug branch from a09975c to 13ecac9 Compare April 21, 2026 17:25

logonoff approved these changes Apr 21, 2026

View reviewed changes

openshift-ci Bot added the lgtm Indicates that a PR is ready to be merged. label Apr 21, 2026

openshift-ci Bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Apr 21, 2026

openshift-ci-robot added the verified Signifies that the PR passed pre-merge verification criteria label Apr 21, 2026

openshift-merge-bot Bot merged commit d6fa401 into openshift:main Apr 22, 2026
8 checks passed

sg00dwin deleted the OCPBUGS-81668-User-Preference-Responsive-Bug branch April 22, 2026 18:29

Conversation

sg00dwin commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

After Fix Confirmation

Test plan

Summary by CodeRabbit

Uh oh!

openshift-ci-robot commented Apr 14, 2026

Summary

After Fix Confirmation

Test plan

Uh oh!

openshift-ci-robot commented Apr 14, 2026

Summary

After Fix Confirmation

Test plan

Uh oh!

coderabbitai Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

sg00dwin commented Apr 14, 2026

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci Bot commented Apr 21, 2026

Uh oh!

logonoff commented Apr 21, 2026

Uh oh!

logonoff commented Apr 21, 2026

Uh oh!

openshift-ci-robot commented Apr 21, 2026

Uh oh!

openshift-merge-bot Bot commented Apr 21, 2026

Uh oh!

openshift-ci Bot commented Apr 22, 2026

Uh oh!

Uh oh!

openshift-ci-robot commented Apr 22, 2026

Summary

After Fix Confirmation

Test plan

Summary by CodeRabbit

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sg00dwin commented Apr 14, 2026 •

edited

Loading

coderabbitai Bot commented Apr 14, 2026 •

edited

Loading